<template>
    <nav class="grid-menu">
        <div class="logo">Logo</div>
        <div class="menu-items">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#services">Services</a>
        <a href="#contact">Contact</a>
        </div>
  </nav>

  <br>
  <hr>
  <br>

  <div class="layout-container">
    <div class="box grid-box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>

  <br>
  <hr>
  <br>

  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>

  </template>
  
  <script setup lang="ts">

  </script>
  
  <style lang="less" scoped>
.grid-menu { 
  display: grid;
  grid-template-columns: 1fr 3fr; /* Logo 占1份，菜单项占3份 */
  align-items: center; /* 垂直居中对齐 */
  padding: 10px 20px;
  background-color: #333;
  color: white;
}

.logo {
  font-size: 1.5em;
}

.menu-items {
  display: grid;
  grid-auto-flow: column; /* 水平排列菜单项 */
  gap: 20px; /* 菜单项之间的间距 */
}

.menu-items a {
  color: white;
  text-decoration: none;
}

.menu-items a:hover {
  text-decoration: underline; /* 悬停效果 */
}

.layout-container {
    margin: 0 auto;
    width: 80%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    grid-gap: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(102, 100, 100, 0.1);
    .box {
        background-color: #f5b938;
        border-radius: 10px;
        text-align: center;
        line-height: 200px;
        color: white;
    }
    .grid-box {
        grid-column: 1/3;
        grid-row: 1/3;
    }
}


.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 默认3列 */
  gap: 10px; /* 列和行之间的间距 */
  margin-bottom: 1000px;
}

.grid-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
}

/* 小屏幕（如手机） */
@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr; /* 1列 */
  }
}

/* 中等屏幕（如平板） */
@media (min-width: 601px) and (max-width: 900px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}

/* 大屏幕（如桌面） */
@media (min-width: 901px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 3列 */
  }
}
  </style>